<template>
<!--  style="display: flex;align-items: center;justify-content: center;" -->
  <div class="page">
    <grid-layout
      :layout.sync="layout.layouts"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true">
      <template v-for="item in layout.layouts">
        <grid-item
          :style="getStyle(item)"
          :static="item.fullscreen"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :key="item.i"
          :i="item.i">{{ item.fullscreen ? 'a25sd74as28d7a4s382da7s8das84da8s3d4asd' : item.i }}</grid-item>
      </template>
    </grid-layout>
  </div>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout';
export default {
  components: {
    GridLayout,
    GridItem
  },
  data() {
    return {
      layout: {
        layouts: [
          { "x": 0, "y": 0, "w": 2, "h": 2, "i": "0", fullscreen: true },
          { "x": 2, "y": 0, "w": 2, "h": 4, "i": "1" },
          { "x": 4, "y": 0, "w": 2, "h": 5, "i": "2" },
          { "x": 6, "y": 0, "w": 2, "h": 3, "i": "3" },
          { "x": 8, "y": 0, "w": 2, "h": 3, "i": "4" },
          { "x": 10, "y": 0, "w": 2, "h": 3, "i": "5" },
          { "x": 0, "y": 5, "w": 2, "h": 5, "i": "6" },
          { "x": 2, "y": 5, "w": 2, "h": 5, "i": "7" },
          { "x": 4, "y": 5, "w": 2, "h": 5, "i": "8" },
          { "x": 6, "y": 3, "w": 2, "h": 4, "i": "9" },
          { "x": 8, "y": 4, "w": 2, "h": 4, "i": "10" },
          { "x": 10, "y": 4, "w": 2, "h": 4, "i": "11" },
          { "x": 0, "y": 10, "w": 2, "h": 5, "i": "12" },
          { "x": 2, "y": 10, "w": 2, "h": 5, "i": "13" },
          { "x": 4, "y": 8, "w": 2, "h": 4, "i": "14" },
          { "x": 6, "y": 8, "w": 2, "h": 4, "i": "15" },
          { "x": 8, "y": 10, "w": 2, "h": 5, "i": "16" },
          { "x": 10, "y": 4, "w": 2, "h": 2, "i": "17" },
          { "x": 0, "y": 9, "w": 2, "h": 3, "i": "18" },
          { "x": 2, "y": 6, "w": 2, "h": 2, "i": "19" }
        ]
      }
    }
  },
  methods: {
    getStyle (item) {
      if (item.fullscreen) {
        return {
          zIndex: 1,
          width: '100% !important',
          height: '100% !important',
          border: '1px solid red',
          transform: 'none !important'
        }
      } else {
        return {
          zIndex: 888,
          background: 'blue'
        }
      }
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss">
.page {
  width: 100%;
  height: 100%;
  .vue-grid-item {
    border: 1px solid #ccc;
  }
}
</style>